<template>
  <div>
    <div v-if="playList" class="hotTop">
      <div class="hotopct">
        <div class="hoticon"></div>
        <div class="updatetime">
          更新日期：{{ playList.updateTime | formatDate }}
        </div>
      </div>
    </div>
    <ul class="newsong" v-if="hotSong.length > 0">
      <li v-for="(s, index) in hotSong" :key="s.id">
        <SongItem :item="s" @play="$emit('play', $event)" :class="{'colorRed': Number(index + 1) < 4}">{{
          (index + 1) &lt; 10 ? "0"+(index + 1) : (index + 1)
        }}</SongItem>
      </li>
    </ul>
    <Loading v-if="isLoading"></Loading>
    <div class="loadingmore" @click="loadMore">
      {{ moreSongs ? "点击加载更多..." : "已经到底了~" }}
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";
export default {
  name: "hot",
  data() {
    return {
      moreSongs: true,
      hotSong: [],
      playList: null,
      page: 1,
      isLoading: true,
    };
  },
  created() {
    this.loadMusic();
  },
  methods: {
    loadMusic() {
      this.axios
        .get("/playlist/detail?id=3778678")
        .then((data) => {
          let trackIDS = data.data.playlist.trackIds.slice(
            (this.page - 1) * 20,
            20 * this.page
          );
          this.playList = data.data.playlist;
          let ids = trackIDS.map((d) => {
            return d.id;
          });
          return ids.join(",");
        })
        .then((ids) => {
          this.axios
            .get("http://music.kele8.cn/song/detail?ids=" + ids)
            .then((songData) => {
              if (songData.data.songs) {
                this.isLoading = false;
                this.moreSongs = true;
                songData.data.songs.map((d) => {
                  d.song = {
                    artists: d.ar,
                  };
                  this.hotSong.push(d);
                  return d;
                });
              } else {
                this.isLoading = false;
                this.moreSongs = false;
              }
            });
        });
    },
    loadMore() {
      this.page++;
      this.isLoading = true;
      this.loadMusic();
    },
  },
  components: {
    SongItem,
    Loading,
  },
  filters: {
    formatDate(val) {
      let date = new Date(val);
      return date.getMonth() + 1 + "月" + date.getDate() + "日";
    },
  },
};
</script>
<style lang="less" scoped>
.hotTop {
  position: relative;
  padding-top: 38.9%;
  overflow: hidden;
  background: url(../assets/hot_music_bg_2x.jpg) no-repeat;
  background-size: contain;
  .hotopct {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    padding-left: 20px;
    box-sizing: border-box;
    .hoticon {
      width: 142px;
      height: 67px;
      background: url(../assets/index_icon_2x.png) no-repeat;
      background-position: -24px -30px;
      background-size: 166px 97px;
    }
    .updatetime {
      margin-top: 10px;
      color: hsla(0, 0%, 100%, 0.8);
      font-size: 12px;
      transform: scale(0.91);
      transform-origin: left top;
    }
  }
}
.loadingmore {
  background-color: #fff;
  text-align: center;
}
.footer {
  height: 64px;
  width: 100vw;
}
/deep/.index {
  color: #999;
  font-size: 17px;
  width: 40px;
  height: 55px;
  text-align: center;
  line-height: 55px;
}
/deep/.songItem {
  padding: 0px 0px;
}
/deep/.playbtn {
  margin-right: 8px;
}
.colorRed{
  color: #df3436;
}
</style>